<!-- 详情页-->
<template>
    <div>
        <Toopbar></Toopbar>
        <div class="main">
            <section class="content film-view">
                <div class="film-img-weap">
                    <div class="film-img">
                        <img src="../../assets/images/film-1.jpg"  />
                    </div>
                </div>
                <div class="film-intro">
                    <div class="film-word1">影片简介</div>
                    <div class="film-word2">
                        <span>导　　演：</span>
                        <span>艾斯彭·山德伯格</span>
                    </div>
                    <div class="film-word2">
                        <span>主　　演：</span>
                        <span>约翰尼·德普 | 哈维尔·巴登 | 杰弗里·拉什 | 奥兰多·布鲁姆 | 凯拉·奈特莉</span>
                    </div>
                    <div class="film-word2">
                        <span>地区语言：</span>
                        <span>美国 澳大利亚</span>
                        (   <span>英语</span>   )
                    </div>
                    <div class="film-word2">
                        <span>类　　型：</span>
                        <span>动作|奇幻|冒险</span>
                    </div>
                    <div class="film-word2">
                        <span>上映日期：</span>
                        <span>5月26日上映</span>
                    </div>
                    <div class="film-word3">故事发生在《加勒比海盗3：世界的尽头》沉船湾之战20年后。 亡灵萨拉查船长（哈维尔·巴登 Javier Bardem 饰）率领自己的亡灵海军杀出了世界的尽头，“深海阎王”威尔·特纳（奥兰多·布鲁姆 Orlando Bloom 饰）乘飞翔的荷兰人号前来追杀却被其引入百慕大三角生死未卜。 获取自由的萨拉查肆虐加勒比海，征服了整个海域，即便是手刃了“黑胡子”爱德华·蒂奇（伊恩·麦柯肖恩 Ian McShane 饰）的海盗王赫克托·巴博萨船长（杰弗里·拉什 Geoffrey Rush 饰）也难以避免心爱的安妮女王复仇号沉入大海的惨剧。 幸存下来的巴博萨在女巫Haifaa Meni(格什菲·法拉哈尼 Golshifteh Farahani 饰)口中得知了萨拉查的真实目的：为寻找他的宿敌杰克船长（约翰尼·德普 Johnny Depp 饰），遂重返皇家海军，展开了复仇旅程。 而在父亲蒂格船长（基思·理查兹 Keith Richards 饰）指引下，杰克也将乘着失而复得的黑珍珠号再次扬帆起航，率领聪明美丽的天文学家卡琳娜·史密斯（卡雅·斯考达里奥 Kaya Scodelario 饰）以及与威尔·特纳有着神秘联系的年轻皇家海军亨利（布兰顿·思怀兹 Brenton Thwaites 饰），一起去寻找唯一有可能击败萨拉查的宝物：传说中海神波塞冬的三叉戟。 加勒比的碧海之上将会燃起前所未见的硝烟。</div>
                </div>
                <div class="operation">
                    <button class="cpn-btn">立即购票</button>
                </div>
            </section> 
        </div>
        <!--{{$route.params.id}}-->

    </div>
</template>

<script>
    import Toopbar  from '../Patch/Toopbar.vue';
    export  default {
        components :{
            Toopbar,
            
        }
    }
</script> 

<style>
    *{ margin:0; padding:0;box-sizing: border-box;}
    body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff;}
    body,input,button,select,textarea,table{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;font-family: 'Microsoft YaHei', Tahoma, Helvetica, Arial, sans-serif;}
    img{vertical-align:middle;border: 0;}
    a,button{outline: none;}
    
    .content{padding: 0 !important;margin: 0 auto !important;}
    .film-view .film-img-wrap{overflow:hidden;}
    .film-view .film-img{background-size:100%; }
    .film-view img{width: 100%;transition: all 1.2s ease;opacity: 1;}
    .film-view .film-intro{user-select:text;}
    .film-view .film-intro .film-word1{margin: 16px auto;border-left: 16px solid RGB(228, 200, 156);font-size: 16px;padding-left: 4px;}
    .film-view .film-intro .film-word2{height: 18px;overflow: hidden;margin-bottom: 10px;padding-left: 20px;}
    .film-view .film-intro .film-word3{text-overflow: ellipsis;margin-bottom: 80px;padding-left: 20px;padding-right: 20px;}
    .film-view .operation {position: fixed;left: 0;bottom: 20px;width: 100%;text-align: center;}
    .cpn-btn{font-size: 14px;min-width: 156px;height: 36px;line-height: 36px;border: none;background-color: #fe8233;padding: 0;margin: 0;border-radius: 18px;color: #fff;}
</style>

